<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="form-box" :style="{'top':navHeight+'rpx'}">
			<view class="box form">
				<view class="line acea-row">
					<view class="tit"> 姓名 </view>
					<input type="text" v-model="list.user_name" placeholder="请填写姓名" placeholder-class="psc">
				</view>
				<view class="line acea-row" @click="show = true">
					<view class="tit"> 性别 </view>
					<input type="text" v-model="list.user_sex" placeholder="请选择性别" placeholder-class="psc" disabled>
				</view>
				<view class="line acea-row">
					<view class="tit"> 电话 </view>
					<input type="text" v-model="list.user_mobile" placeholder="请填写联系电话" placeholder-class="psc">
				</view>
				<view class="line acea-row">
					<view class="tit"> 年龄 </view>
					<input type="number" v-model="list.age" placeholder="请填写当前年龄" placeholder-class="psc">
				</view>
				<view class="line acea-row">
					<view class="tit"> 描述 </view>
					<textarea v-model="list.info" placeholder="请填写描述" placeholder-class="psc"></textarea>
				</view>
			</view>
		</view>
		<view class="bottom-box acea-row row-between-wrapper">
			<view class="total">
				费用:<text>￥{{price}}元</text>
			</view>
			<view @click="submit" class="order-btn">立即申请</view>
		</view>
		<u-action-sheet :actions="sex_list" description="性别" :show="show"
			closeOnClickAction="true" cancelText="取消" @select="sex_confirm"
			@close="show = false"></u-action-sheet>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let app = getApp();
	const d = new Date()
	const year = d.getFullYear();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '辅生绿通申请',
					'color': false,
				},
				navHeight: app.globalData.navHeight,
				patient: '',
				price: 0.00,
				list: {
					openid: '',
					type: 11,
					fsltzy_id: '',
					service_id: '',
					user_name: '',
					user_sex: '',
					user_mobile: '',
					age: '',
					info: ''
				},
				show:false,
				sex_list: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
			};
		},
		onLoad(option) {
			this.price = Number(uni.getStorageSync('price'));
			this.list.service_id = uni.getStorageSync('service_id');
			this.list.fsltzy_id = option.id;
		},
		methods: {
			sex_confirm(e){
				console.log('confirm', e)
				this.list.user_sex = e.name;
				this.show = false
			},
			submit() {
				if (!this.list.user_name) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写姓名'
					})
					return;
				}
				if (!this.list.user_sex) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请选择性别'
					})
					return;
				}
				if (!this.list.user_mobile) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写电话'
					})
					return;
				}
				if (!this.list.age) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写年龄'
					})
					return;
				}
				this.apply()
			},
			async apply() {
				this.list.openid = uni.getStorageSync('openid')
				const res = await this.$myRequest({
					url: '/api/Fslt/insert',
					data: this.list,
				})
				console.log("生成辅生绿通订单", res.data.data);
				var order_id = res.data.data.order_id;
				var service_name = res.data.data.service_name;
				if (res.data.status == 200) {
					uni.reLaunch({
						url: '/pages/user/payment?order_id=' + order_id + '&service_name=' + service_name +
							'&price=' + this.price
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wap{
		padding: 30upx;
		background: #fff;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-child {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 80rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.form .line textarea {
		width: 100%;
		height: 130rpx;
		border-radius: 12rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 0 30rpx;
		height: 120rpx;
		z-index: 10;
	}

	.bottom-box .total text {
		color: #FF4242;
	}

	.bottom-box .order-btn {
		width: 250rpx;
		height: 70rpx;
		background: #347DFE;
		border-radius: 10px;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}
</style>
